<template>
    <!-- 底部导航 -->
    <div class="bottom-nav">
      <div 
        class="nav-item" 
        :class="{ active: isActive('/') }" 
        @click="navigateTo('/')">
        <el-icon><HomeFilled /></el-icon>
        <span>首页</span>
      </div>
      <div 
        class="nav-item" 
        :class="{ active: isActive('/wallet') }" 
        @click="navigateTo('/wallet')">
        <el-icon><Wallet /></el-icon>
        <span>钱包</span>
      </div>
      <div 
        class="nav-item" 
        :class="{ active: isActive('/service') }" 
        @click="navigateTo('/service')">
        <el-icon><Service /></el-icon>
        <span>客服</span>
      </div>
      <div 
        class="nav-item" 
        :class="{ active: isActive('/user') }" 
        @click="navigateTo('/user')">
        <el-icon><User /></el-icon>
        <span>我的</span>
      </div>
    </div>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { 
  User, 
  CreditCard, 
  Money, 
  Wallet, 
  Coin, 
  QuestionFilled, 
  HomeFilled, 
  SwitchButton,
  ArrowRight,
  Lock,
  Service
} from '@element-plus/icons-vue';

// 获取当前路由和路由器
const route = useRoute();
const router = useRouter();
const currentRoute = computed(() => route.path);

// 导航到指定路径
const navigateTo = (path) => {
  router.push(path);
};

// 检查当前路由是否激活
const isActive = (path) => {
  if (path === '/') {
    return currentRoute.value === path;
  }
  return currentRoute.value.startsWith(path);
};
</script>

<style scoped lang="scss">
// 底部导航
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #fff;
  display: flex;
  border-top: 1px solid #eee;
  z-index: 100;
  
  .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 12px;
    
    .el-icon {
      font-size: 20px;
      margin-bottom: 4px;
    }
    
    &.active {
      color: #409eff;
    }
  }
}

</style>